<!--
    * Time    : 2021-01-10 10:25:13
    * Author  : zhangTj
    * Desc    : 下级服务商
-->

<template>
    <div class="w750">
        <div>
            <div class="d-grid bg-fff px-15p a-center text-999 font-14" style="grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: 50px">
                <span>服务商</span>
                <span>保证金</span>
                <span class="text-center">加入日期</span>
            </div>
            <div class="bg-fff">
                <van-list
                    v-if="paging.tab"
                    v-model="paging.loading"
                    :finished="paging.finished"
                    :immediate-check="false"
                    finished-text="没有更多了"
                    @load="loadMore"
                >
                    <div
                        @click="$toPage('facilitatorInfo', { id: item.id })"
                        class="d-grid px-15p a-center grid-item font-14 py-15p line-h-md"
                        style="grid-template-columns: 1.5fr 1fr 1fr; grid-column-gap: 15px"
                        v-for="(item, index) in list"
                        :key="index"
                    >
                        <span class="font-14">{{ item.serviceProvidersName }}({{ item.actualName }})</span>
                        <span>{{ item.originalDepositAmount }}</span>
                        <span>{{ item.createTime|dateformat('YYYY-MM-DD ') }}</span>
                    </div>
                </van-list>
            </div>
            <EmptyServe v-if="paging.emptylist || paging.error" title="暂无下级服务商" />
        </div>
    </div>
</template>

<script>
import EmptyServe from 'components/EmptyServe/EmptyServe'
import { providersNextList } from 'api/facilitator'
import PageUtil from 'utils/PageUtil'

const list = new PageUtil(providersNextList)

export default {
    name: '',
    components: { EmptyServe },
    data() {
        return {
            paging: {
                tab: true,
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false // 是否显示列表为空时的样式
            },
            list: []
        }
    },
    computed: {},
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        list.loadListByPage(this)
    },
    methods: {
        // 加载更多
        loadMore() {
            list.loadListByPageMore()
        }
    }
}
</script>

<style scoped>
.grid-item:nth-child(odd) {
    background: #f8f8f8;
}
</style>
